<!--
  Copyright 2025 The Ray Optics Simulation authors and contributors

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<template>
  <div v-if="layout === 'desktop'" class="col-auto">
    <div class="row">
      <div class="btn-group" role="group">
        <ToolsList layout="desktop" />
        <input type="radio" class="btn-check" name="toolsradio" id="tool_" autocomplete="off" checked @change="handleMoveView">
        <label 
          id="tool__label" 
          class="btn shadow-none btn-primary" 
          for="tool_"
          v-tooltip-popover:[tooltipType]="{
            title: $t('main:tools.moveView.title'),
            content: $t('main:tools.moveView.description')
          }"
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-move" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10zM.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708l-2-2zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8z"/>
          </svg>
        </label>
      </div>
    </div>
    <div class="row justify-content-center title">{{ $t('main:tools.title') }}</div>
  </div>

  <div v-if="layout === 'mobile'" class="col p-1">
    <button type="button" class="btn shadow-none btn-primary w-100" data-bs-toggle="dropdown" data-bs-display="static" id="mobile-tools">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tools" viewBox="0 0 16 16">
        <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 1 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0Zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708ZM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11Z"/>
      </svg>
      <span class="d-none d-md-inline">{{ ' ' + $t('main:tools.title') }}</span>
    </button>
    <div class="dropdown-menu mobile-dropdown-menu">
      <div class="mobile-dropdown">
        <ul id="mobile-dropdown-tools-root">
          <li v-for="category in toolCategories" :key="category">
            <button class="btn btn-primary dropdown-item mobile-dropdown-trigger d-flex w-100" :id="'mobile-dropdown-trigger-' + category">
              <div :id="'tool_' + category + '__text'" class="col">{{ $t(`main:tools.categories.${category}`) }}</div>
              <div class="col text-end">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
                </svg>
              </div>
            </button>
          </li>
          <li>
            <input type="radio" class="btn-check" name="toolsradio_mobile" autocomplete="off" id="tool__mobile" checked @change="handleMoveView">
            <label id="tool__mobile_label" class="btn btn-primary dropdown-item" for="tool__mobile">
              {{ $t('main:tools.moveView.title') }}
            </label>
          </li>
        </ul>

        <ToolsList layout="mobile" />
      </div>
      
    </div>
  </div>
</template>

<script>
/**
 * @module ToolsBar
 * @description The Vue component for the 'Tools' section in the toolbar.
 * @vue-prop {String} layout - The layout of the toolbar. Can be 'mobile' or 'desktop'.
 */
import ToolsList from './ToolsList.vue'
import { vTooltipPopover } from '../../directives/tooltip-popover'
import { usePreferencesStore } from '../../store/preferences'
import { computed, toRef } from 'vue'
import { app } from '../../services/app.js'

export default {
  name: 'ToolsBar',
  directives: {
    'tooltip-popover': vTooltipPopover
  },
  props: {
    layout: String
  },
  components: {
    ToolsList
  },
  setup() {
    const preferences = usePreferencesStore()
    const help = toRef(preferences, 'help')
    const tooltipType = computed(() => help.value ? 'popover' : undefined)

    const toolCategories = [
      'lightSource',
      'mirror',
      'glass',
      'blocker',
      'other'
    ]

    const handleMoveView = () => {
      app.editor.addingObjType = ''
    }

    return {
      toolCategories,
      tooltipType,
      handleMoveView
    }
  }
}
</script>